@import "./mixins/mixins.scss";
@import "./common/var.scss";

$typeMap: (
  primary: $--link-primary-font-color,
  success: $--link-success-font-color,
  danger: $--link-danger-font-color,
  warning: $--link-warning-font-color,
  info: $--link-info-font-color,
);

@include b(link) {
  position: relative;
  text-decoration: none;
  font-size: $--link-font-size;
  font-weight: $--link-font-weight;
  color: $--link-default-font-color;

  &:hover {
    color: $--link-active-font-color;
  }

  [class *= "el-icon-"] {
    & + span {
      margin-left: 5px;
    }
  }

  @include when(underline) {
    &:hover::after {
      position: absolute;
      top: 0;
      right: 0;
      bottom: 0;
      left: 0;
      content: '';
      border-bottom: 1px solid $--link-active-font-color;
    }
  }

  @include when(disabled) {
    cursor: not-allowed;
    color: #c0c4cc;
  }

  @each $type, $color in $typeMap {
    @include m($type) {
      color: $color;

      &:hover {
        color: mix($--color-white, $color, 20%);
      }

      @include when(underline) {
        &:hover::after {
          border-bottom-color: $color;
        }
      }

      @include when(disabled) {
        color: mix($--color-white, $color);
      }
    }
  }
  
}